<template>
  <a-modal title="禁用产品" :width="720" :visible="visible" @ok="handleModalConfirm" @cancel="handleModalCancel"
    :confirm-loading="modalLoading">
    <div class="table-title">
      <span :key="index" v-for="(item, index) in tableTitle">{{ item }}</span>
    </div>
    <div class="table-list" ref="tableList">
      <div class="table-row" :key="index" v-for="(item, index) in tableList">
        <span>{{ index + 1 }}</span>
        <span>{{ item.loanName }}</span>
        <span>
          <a-switch v-model="item.isChecked" checked-children="已禁用" un-checked-children="未禁用" style=" width:70px" />
        </span>
      </div>
    </div>
  </a-modal>
</template>

<script>
import * as Ajax from '@/api/loan';
import Sortable from 'sortablejs';
export default {
  props: {
    visible: {
      type: Boolean,
    },
    id: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      modalLoading: false,
      tableTitle: ['序号', '产品名称', '绑定'],
      tableList: [],
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getTableList();
      } else {
        // this.handleModalCancel();
      }
    },
  },
  methods: {
    getTableList() {
      
      const params = { channelId: this.id };
      Ajax.hot_hitinfo(params).then(({ success, data }) => {
        if (success) {
          this.tableList = Array.isArray(data) ? data.map((it) => ({
            ...it,
            isChecked: it.choose === 1,
          })) : [];
        } else {
          this.tableList = [];
        }
      }).finally(() => {
        this.dragHtmlDom();
      });
    },
    dragHtmlDom() {
      var that = this;
      this.$nextTick(function () {
        var el = this.$refs.tableList;
        // eslint-disable-next-line no-new
        new Sortable(el, {
          onEnd: function (evt) {
            that.tableList.splice(evt.newIndex, 0, that.tableList.splice(evt.oldIndex, 1)[0]);
            const newArray = that.tableList.slice(0);
            that.tableList = [];
            that.$nextTick(() => {
              that.tableList = newArray;
            });
          },
        });
      });
    },
    handleModalConfirm() {
      this.modalLoading = true;
      const productIdList = this.tableList.filter((it) => it.isChecked).map((item) => (item.loanId));
      const params = {
        channelId: this.id,
        productIdList,
      };
      Ajax.hot_hitsave(params)
        .then(({ success }) => {
          if (success) {
            this.$message.success('操作成功');
            this.getTableList();
            this.$emit('success');
          }
        })
        .finally(() => {
          this.modalLoading = false;
        });
    },
    handleModalCancel() {
      this.$emit('close');
    },
  },
};
</script>

<style lang="scss" scoped>
.table-title {
  display: flex;
  border: 1px solid #e8e8e8;
  background-color: #fafafa;
  // border-bottom: 0;

  span {
    text-align: center;
    padding: 16px;
    color: rgba(0, 0, 0, 0.85);
    font-weight: 500;
    font-size: 14px;

    &:first-child {
      flex: 1;
    }

    &:nth-child(2) {
      flex: 3;
    }

    &:last-child {
      flex: 2;
    }

    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
  }
}

.table-row {
  display: flex;
  border: 1px solid #e8e8e8;
  border-top: 0;
  position: relative;
  cursor: move;

  span {
    text-align: center;
    padding: 12px 16px;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;

    &:first-child {
      flex: 1;
    }

    &:nth-child(2) {
      flex: 3;
    }

    &:last-child {
      flex: 2;
    }

    &:not(:last-child) {
      border-right: 1px solid #e8e8e8;
    }
  }
}
</style>
